@*
* Copyright 2016 LinkedIn Corp.
*
@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@

@(flowDefPair: IdUrlPair, results: java.util.Map[IdUrlPair, java.util.Map[IdUrlPair, java.util.List[models.AppResult]]],
    idPairToJobNameMap: java.util.Map[IdUrlPair, String], flowExecTimeList: java.util.List[Long])

@import com.linkedin.drelephant.analysis.Severity
@import scala.Predef; var jobDefIndex = 0

@getSeverityColor(severity : Severity) = @{
  var color: String  = "#5cb85c"; // LOW or NONE

  if(severity.getText.equalsIgnoreCase("CRITICAL")) {
    color = "#d9534f"
  } else if(severity.getText.equalsIgnoreCase("SEVERE")) {
    color = "#e4804e"
  } else if(severity.getText.equalsIgnoreCase("MODERATE")) {
    color = "#f0ad4e"
  }

  color
}

@if(results != null && results.nonEmpty) {
  <div class="box shadow details-container">
    <h4><a href="@flowDefPair.getId()">Flow History</a></h4>
    <hr class="horizontal-line">
    <script src="@routes.Assets.at("js/flowhistoryform.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("js/graphutility.js")" type="text/javascript"></script>

    <div>

        <!-- Performance Score Graph -->
      <div class="history-graph">
        <img src='@routes.Assets.at("images/loading.gif")' id='loading-indicator' alt='Loading...' class="loading-indicator"/>
        <svg class="svg-graph graph-padding" id="visualisation" ></svg>
      </div>

      <hr>

        <!-- The tabular results -->
      <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover table-fixed">
          <thead>
            <tr>
              <th class="history-table-first-column">Flow Executions</th>
              @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                <th>
                  <a href='./newjobhistory?job-def-id=@helper.urlEncode(jobDefPair.getId)&select-graph-type=heuristics' data-toggle='tooltip'
                  title='@jobDefPair.getId'>Job @{jobDefIndex = jobDefIndex + 1; jobDefIndex}<br>
                    @if(jobName.length > 45) { @jobName.substring(0, 41)... } else { @jobName }
                  </a>
                </th>
              }
            </tr>
          </thead>

          <tbody>
          @for((flowExecPair, jobMap) <- results) {
            <tr>

                <!-- The First column, execution id -->
              <td style="text-align:center">
                <a class="exectime" href='@flowExecPair.getUrl' data-toggle='tooltip' title='@flowExecPair.getUrl'>Loading...</a>
              </td>

                <!-- The remaining columns -->
              @for((jobDefPair, jobName) <- idPairToJobNameMap) {
                <td>
                @if(jobMap.get(jobDefPair) != null) {
                  @for((result,jobCount) <- jobMap.get(jobDefPair).zipWithIndex) {
                    <a class="hasTooltip" href='./new#/app?applicationid=@result.id'
                    style='color: @getSeverityColor(result.severity);'>&#9673;
                      <!-- Table Tooltip Content -->
                      <div id="tooltip-div">
                        <p><b>@result.id</b></p>
                        @for(yarnAppHeuristicResult <- result.yarnAppHeuristicResults) {
                          <p style="color: @getSeverityColor(yarnAppHeuristicResult.severity);">@yarnAppHeuristicResult.heuristicName</p>
                        }
                      </div>
                    </a>
                  }
                }
                </td>
              }
            </tr>
          }
          </tbody>
        </table>
      </div>
    </div>
  </div>
}